<template>
    <div>
        <div class="title">
          <el-row>
            <el-col :span="1" style="width: 50px;">
              <span style="color:#757575;">位置 : </span>
            </el-col>
            <el-col :span="20">
              <span class="hand">访问记录</span>
            </el-col>
          </el-row>
        </div>

        <div class="posttable">
          <el-row type="flex" justify="center">
            <el-col :span="23">
              <div style="float:left;">
                  <el-row type="flex">
                    <el-col :span="23" style="margin:15px 0px 20px 20px;width: 160px;">
                      <el-date-picker
                        v-model="startTime"
                        type="date"
                        placeholder="请选择开始时间"
                        value-format="yyyy-MM-dd"
                        @change="selecttime"
                        :picker-options="pickerBeginDateBefore">
                      </el-date-picker>
                    </el-col>
                    <el-col :span="23" style="margin:15px 0px 20px 20px;width: 160px;">
                      <el-date-picker
                        v-model="endTime"
                        type="date"
                        placeholder="请选择结束时间"
                        value-format="yyyy-MM-dd"
                        @change="selecttime1"
                        :picker-options="pickerBeginDateAfter">
                      </el-date-picker>
                    </el-col>
                  </el-row>
              </div>
              <div style="float: right;">
                <el-row type="flex">
                  <el-col :span="23" style="margin:15px 0px 0px 0px;width: 180px;">
                    <el-input
                      class="btn"
                      style="width: 180px;height: 40px;padding: 4px;border-radius:5px;"
                      size="medium"
                      placeholder="请输入内容"
                      v-model.trim="inputValue"
                      @change="selectInfo"
                      @keyup.enter.native="selectInfo"
                    >
                      <i
                        slot="suffix"
                        class="el-input__icon el-icon-search"
                        style="cursor: pointer;"
                        @click="selectInfo"
                      ></i>
                    </el-input>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center" style="min-height: 50px;
              line-height: 50px;">
            <el-col :span="23">
              <el-table
                ref="singleTable"
                highlight-current-row
                :data="tableData">
                <el-table-column prop="name" label="访问人"></el-table-column>
                <el-table-column prop="ipaddr" label="IP地址"></el-table-column>
                <el-table-column prop="servletPath" label="访问接口"></el-table-column>
                <el-table-column label="访问时间">
                  <template slot-scope="scope">
                      <!-- <span>{{ (scope.row.accessTime ||'').split(' ')[0] }}</span> -->
                      <!--  -->
                      <span>{{ scope.row.accessTime |  converTime("YYYY-MM-DD HH:mm:ss") }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pager">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="pagehandleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5,10,15]"
                  :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalcount"
                ></el-pagination>
              </div>
            </el-col>
          </el-row>
        </div>

    </div>
</template>

<script>
import axios from 'axios'
import tagsView from '../../store/modules/tagsView'

export default {
  data(){
      return {
          title:'入职统计表',
          startTime:null,
          endTime:null,
          inputValue:"",
          tableData:[],
          currentRow:null,
          currentPage: 1,
          pagesize: 15,
          totalcount: 0,
          pickerBeginDateBefore: {
            disabledDate: time => {
              if (this.endTime) {
                  return time.getTime() > new Date(this.endTime).getTime()
                } else {
                  return time.getTime() > Date.now()
              }
            }
          },
          pickerBeginDateAfter: {
              disabledDate: time => {
              if (this.startTime) {
                return time.getTime() > Date.now() || time.getTime() < new Date(this.startTime).getTime()
              } else {
                return time.getTime() > Date.now()
              }
              }
          },
      }
  },
  created() {
      this.getdata();
  },
  methods:{
    // 获取页面信息
    getdata() {
      axios.post(this.url + "/system/accesslog/queryall",{
        pageNum: this.currentPage,
        pageSize: this.pagesize,
        startTime: this.startTime,
        endTime: this.endTime,
        condition: this.inputValue
      }).then(res => {
        this.unlogin(res.data.code)
        if(res.data.code == 200){
          this.tableData = res.data.data.list;
          this.totalcount = res.data.data.total;
        }
      })
    },
    selecttime() {
      this.currentPage = 1;
      this.getdata();
    },
    selecttime1() {
      this.currentPage = 1;
      this.getdata();
    },
    selectInfo() {
      this.currentPage = 1;
      this.getdata();
    },
    //改变每页显示数据条数
    handleSizeChange(val) {
      this.pagesize = val;
      this.getdata();
    },
    //切换页数
    pagehandleCurrentChange(val) {
      this.currentPage = val;
      this.getdata();
    },
  }
}
</script>

<style scoped>
    .title {
      background-color: #fff;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      padding-left: 20px;
      margin-top: 6px;
      margin-bottom: 6px;
    }
    .hand {
      color: #757575;
    }
    .posttable {
      min-height: 700px;
      background-color: #fff;
    }
    .pager {
      width: 100%;
      overflow: hidden;
      position: relative;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .el-pagination {
      margin-left: 50%;
      transform: translateX(-50%);
    }
    .other {
      color: #1198ff;
      cursor: pointer;
      text-decoration: none;
    }

</style>
